{{--表格--}}
<script>
    //联系人
    layui.use('table', function(){
        var table = layui.table ,form = layui.form;
        //第一个表格实例
        table.render({
            elem: '#demo4'
            ,height: 315
            ,url:"/admin/customers/data5" //数据接口
            ,page: true //开启分页
            ,id:'idTest4'
            ,cols: [[ //表头
                {type:'checkbox'}
                ,{field:'id', width:80,edit: 'text',title: 'ID', sort: true}
                ,{field:'name', width:80,edit: 'text', title: '用户名'}
                ,{field:'address', width:80,edit: 'text', title: '性别', sort: true}
                ,{field:'phone', width:80,edit: 'text', title: '城市'}
                ,{field:'email', title: '签名',edit: 'text', minWidth: 100}
                ,{fixed: 'right', title:'操作',edit: 'text',align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]]
        });

        //分页操作
        var $ = layui.$, active = {
            reload: function(){
                var key =document.getElementById('xzk4').value;
               var value=$('#demoReload4');
                //执行重载
                table.reload('idTest4', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: {
                            key: key.toString(),
                            value:value.val()
                        }
                    }
                });
                //复选框操作
               // var aa=$('#xzk');
                //console.log(aa[0][2]);
            },isAll4: function(){ //验证是否全选
                var checkStatus = table.checkStatus('idTest4');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
            ,getCheckLength4: function(){ //获取选中数目
                layer.open({
                    type: 2  //1普通公告 2
                    ,title: ["大家好",'font-size:18px;text-align:center'] //False不显示标题栏
                    , area: ['730px', '560px']
                    ,shade: 0.8
                    ,maxmin: true
                    ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,btnAlign: 'c'
                    ,zIndex: layer.zIndex //重点1
                    ,moveType: 0 //拖拽模式，0或者1
                    ,content: 'http://agonicrm.com/admin/customer/1/toCustomer' //调用的函数fliters
                    ,success: function(layero){
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href:'/'
                            ,target:'_self'
                        });
                        //filter()
                    }
                });
            }
            ,getCheckData4: function(){ //删除选中数据
                var checkStatus = table.checkStatus('idTest4')
                    ,data = (checkStatus.data);
                if(data=="")
                {
                    layer.msg("你没选中");
                }
                console.log(JSON.stringify(data[0]['id']));
                var arr=[];
                for(var i=0;i<data.length;i++)
                {
                    arr.push(data[i]['id']);
                }
                var data1=Object.assign({},arr)
                $.ajax({
                    //几个参数需要注意一下
                    type: "get",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/admin/user/del" ,//url
                    data:data1 ,
                    success: function (result) {
                        console.log(result);
                        layer.msg('删除成功');
                        //window.location.reload();  //页面刷新
                    },
                });
            }
        };
        //搜索
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //表动态操作
        table.on('tool(test4)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            var arr=['id','name','phone','email'];
            var fliters=(filter(arr)+'</div>');
            function filter(str) {
                var field_array=field()[0]//获取字段对应的中文
                console.log(field_array);
                var a = '<div style="padding: 10px; line-height: 42px; background-color: #393D49; color: #fff; font-weight: 300;">';
                str.forEach(function(i,index){
                    if(data[i]!=null)
                    {
                        a+='<span class="layui-form-label" style="width:200px;text-align: left" >'+" "+field_array[i]+":"+data[i]+"</span><br>";
                    }
                })
                return a;
            }
            if(layEvent === 'detail'){ //查看
                //示范一个公告层
                layer.open({
                    type: 1
                    ,title: "大家好" //False不显示标题栏
                    ,closeBtn: false
                    ,area: '300px;'
                    ,shade: 0.8
                    ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,btn: ['火速围观', '残忍拒绝']
                    ,btnAlign: 'c'
                    ,moveType: 1 //拖拽模式，0或者1
                    ,content:fliters //调用的函数
                    ,success: function(layero){
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href: '/'
                            ,target: '_self'
                        });
                        //filter()
                    }
                });
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    window.location.href='/admin/user/'+data.id+'/delete'
                });
            } else if(layEvent === 'edit'){ //编辑
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/admin/user/"+data.id+"/update" ,//url
                    data:data ,
                    success: function (result) {
                        if(result['statu']==0){
                            layer.msg('请双击需要修改的地方，做出修改后再点击编辑 谢谢');
                        }
                        else{
                            layer.msg('修改成功');
                        }
                    },
                });
            }
        });
    });
</script>
<script type="text/html" id="barDemo5">
    <a class="layui-btn layui-btn-xs" lay-event="to_customer">转客户</a>
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
{{--Tab--}}
<script>
    //tab操作
    layui.use('element', function() {
        var $ = layui.jquery
            , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        //触发事件

        //Hash地址的定位
        var layid = location.hash.replace(/^#demo=/, '');
        element.tabChange('demo', layid);

        element.on('tab(demo)', function(elem){
            location.hash = 'demo='+ $(this).attr('lay-id');
        });
    });

</script>